<template>
	<div class="biz-toolbar mr-1" v-if="bizlist.length > 1">
		<div class="title pb-1">事业部</div>
		<ul class="biz-list pr-1">
			<li
				class="item ellipsis"
				v-for="item in bizlist"
				:key="item.biz_id"
				@click="choice(item)"
				:class="{ active: activeId == item.biz_id }"
			>
				{{ item.biz_name }}
			</li>
		</ul>
	</div>
</template>
<script>
export default {
	name: "cl-biz-toolbar",
	props: {
		value: [String, Number],
		showHq: Boolean
	},
	data() {
		return {
			activeId: null
		};
	},
	computed: {
		bizlist() {
			const { business, bizList } = this;
			return [...(this.showHq ? bizList : business)].reverse();
		}
	},
	watch: {
		value(v) {
			this.activeId = v;
		},
		activeId(v) {
			this.changeActive(v);
		}
	},
	mounted() {
		const { bizlist } = this;
		if (!bizlist.length) return;
		this.choice(bizlist[0]);
	},
	methods: {
		changeActive(v) {
			const { bizlist } = this;
			if (!bizlist.length) return;
			let curr = bizlist.find(item => item.biz_id == v);
			if (!curr) return;
			let val = { ...curr };
			console.log("changeActive");
			this.$emit("changeBiz", val);
			this.$emit("change", val);
			this.$emit("input", v);
		},
		choice(item) {
			this.activeId = item.biz_id;
		}
	}
};
</script>
<style lang="scss" scoped>
.biz-toolbar {
	height: 100%;
	min-width: 230px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	box-shadow: 1px 0 1px -1px #969797;
	.title {
		font-size: 18px;
		min-height: 28px;
	}
	.biz-list {
		flex: 1;
		overflow: auto;
		.item {
			font-size: 14px;
			border-radius: 5px;
			background: rgb(249, 250, 252);
			text-align: center;
			height: 36px;
			line-height: 36px;
			box-sizing: border-box;
			padding: 0 8px;
			border: 1px solid rgb(249, 250, 252);
			cursor: pointer;
			transition: all 0.2s ease-out;
			list-style: none;
			&.active {
				border-color: $primary !important;
			}
			& + li.item {
				margin-top: 10px;
			}
		}
	}
}
</style>
